import React, { Component } from 'react';
import { Checkbox, Ellipsis } from 'antd-mobile'

import { connect } from 'react-redux';

import {
    request_minus_shopcart_action,
    request_add_shopcart_action
} from "../../store/actionCreator";
class CartList extends Component {
    state = {
        value: this.props.shopcartlist,
        allPrice: 0,
        allCount: 0
    }


    // 选中商品
    setValue(val) {
        this.setState({
            value: val
        })
    }

    minus_shopcart(item) { //购物车数量-1
        this.props.do_minus_shopcart(item)
    }
    add_shopcart(item) { //购物车数量+1
        this.props.do_add_shopcart(item)
    }

    render() {
        return (
            <div className='cartlist'>
                <Checkbox.Group value={this.state.value} onChange={(value) => { this.setValue(value) }}>
                    {
                        this.props.shopcartlist.map((item) => {
                            return (
                                <div className="shopping" key={item.id} >
                                    <Checkbox value={item}></Checkbox>
                                    <div className="content">
                                        <div className="left">
                                            <img src={item.pic} alt="shopping" />
                                        </div>
                                        <div className="right">
                                            {/* <div className="name">{item.name}</div> */}
                                            <Ellipsis className="name" direction='end' rows={2} content={item.name} />
                                            <span className="sales">{item.salesPrice.name}</span>
                                            <div className="tags">
                                                {
                                                    item.activityTags.map((item) => {
                                                        <span>{item}</span>
                                                    })
                                                }
                                            </div>
                                            <div className="caozuo">
                                                <div className="price"><span>￥</span>{item.salesPrice.value * item.count}</div>
                                                <div className="opr">
                                                    <span onClick={() => { this.minus_shopcart(item) }}>-</span>
                                                    <div>{item.count}</div>
                                                    <span onClick={() => { this.add_shopcart(item) }}>+</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            )
                        })
                    }
                </Checkbox.Group>
                <div className="bottom">
                    <Checkbox
                        checked={this.state.value.length === this.props.shopcartlist.length}
                        onChange={(checked) => {
                            if (checked) {
                                this.setValue(this.props.shopcartlist)
                            } else {
                                this.setValue([])
                            }
                        }}> 全选 </Checkbox>

                    <div className="right">
                        <div className="price">总价：￥<span>
                            {
                                this.state.value.reduce((allprice, item) => allprice + item.salesPrice.value * item.count, 0)
                            }
                        </span></div>
                        <div className="pay"><span>去结算(<i>
                            {
                                this.state.value.reduce((allcount, item) => allcount + item.count, 0)
                            }
                        </i>)</span></div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    (state)=>{ //将store中的数据注入到组件属性中(props)
        return {
            shopcartlist: state.shopcartlist
        }
    },
    (dispatch)=>{ //将dispatch以方法的形式 注入到组件属性中(props)
        return {
            do_add_shopcart(params){
                dispatch( request_add_shopcart_action(params) )
            },
            do_minus_shopcart(params){
                dispatch( request_minus_shopcart_action(params) )
            }
        }
    }
)( CartList );